import React from 'react';
import { Button, Form, Input } from 'antd';
import './login.css';

const onFinish = (values: any) => {
    localStorage.setItem('dataKey', JSON.stringify(values));
};
function login() {
    return (
        <div className='allBox'>
            <div className='formBox'>
                <div className='ztBox'>登录</div>
                <div className='zbdBox'>
                    <Form name='normal_login' className='login-form' initialValues={{ remember: true }} onFinish={onFinish}>
                        <Form.Item
                            name='username'
                            rules={[
                                {
                                    required: true,
                                    message: '请输入用户名'
                                },
                                {
                                    validator: (rule, value) => {
                                        if (/[^\w]/g.test(value)) return Promise.reject('只能是字母数字');
                                        if (value.length > 6) return Promise.reject('长度小于6个字符');
                                        return Promise.resolve();
                                    }
                                }
                            ]}
                        >
                            <Input placeholder='请输入用户名！' />
                        </Form.Item>

                        <Form.Item name='password' rules={[{ required: true, pattern: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/, message: '格式不正确,' }]}>
                            <Input.Password placeholder='请输入密码！' />
                        </Form.Item>

                        <Form.Item>
                            <Button type='primary' htmlType='submit' style={{ width: '100%' }}>
                                登录
                            </Button>
                        </Form.Item>
                        <Form.Item>
                            <div className='mmzcBox'>
                                <a className='login-form-forgot' href='/#/forgot'>
                                    忘记密码
                                </a>

                                <div className='zcBox'>
                                    <div>没有账号?</div>
                                    <a className='login-form-forgot' href='/#/register'>
                                        快速注册
                                    </a>
                                </div>
                            </div>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        </div>
    );
}

export default login;
